<template>
	<view class="time-kill-commodity__-content">
		<view class="head-menu">
			<view class="item" @tap="headTapIndex =0" :class="headTapIndex == 0 ? 'active-item' : ''">已结束</view>
			<view class="item" @tap="headTapIndex =1" :class="headTapIndex == 1 ? 'active-item' : ''">进行中</view>
			<view class="item" @tap="headTapIndex =2" :class="headTapIndex == 2 ? 'active-item' : ''">即将开始</view>
		</view>
		<view class="commodity-content">
			<view class="citem" v-for="(item,index) in commodityList">
				<show-commodity @event="buyCommodity" :title="item.goods_name" :classify="item.goods_subname" :src="item.mainImg" :soldPercent="item.jindu" :price="item.price" :oldPrice="item.original_price" :id="item.unid"></show-commodity>
			</view>
		</view>
		<view class="no-more" v-show="showNoMore">
			—— 没有更多了 ——
		</view>
		<floating-ball @event="handelFloatBall"></floating-ball>
	</view>
</template>

<script>
	import showCommodity from './components/time-kill-commodity-show.vue'
	import floatingBall from '../../components/floating-ball-menu/floating-ball-menu.vue'
	import util from "@/common/util.js";
	export default {
		components: {
			showCommodity,
			floatingBall
		},
		data() {
			return {
				headTapIndex: 1, //头部选项卡
				commodityList: [], //商品列表
				showNoMore:false,//是否还有更多商品
			}
		},
		// 触底事件
		onReachBottom() {
			this.showNoMore = !this.showNoMore
			console.log(this.showNoMore);
		},
		created() {
			this.Goods()
		},
		methods: {
			//限时商品
			Goods(e){
				console.log('e',e);
				let resData = {
					activities:2
				}
				if(e){
					resData.activities_type = e
				}else{
					resData.activities_type = 2
				}
				this.$shopApi.apiPost('font/goods/infos').then(res => {
					console.log('res',res);
					const DATA = res.data
					if(DATA.code == 200){
						// this.util.mainImages(DATA)
						if(DATA.data.length!=0){
							for (var i = 0; i < DATA.data.list.length; i++) {
								if(DATA.data.list[i].images.length!=0){
									DATA.data.list[i].mainImg = this.util.getMainImage(DATA.data.list[i].images)
								}else{
									DATA.data.list[i].mainImg = this.defimg
								}
							}
							this.commodityList = DATA.data.list
						}
					}
					console.log('商品列表',this.commodityList);
					if(this.commodityList.length!=0){
						for (var i = 0; i < this.commodityList.length; i++) {
							console.log('sales',this.commodityList[i].sales);
							console.log('inventory',this.commodityList[i].inventory);
							let num = Math.round(this.commodityList[i].sales/this.commodityList[i].inventory*10000)/100.00
							this.commodityList[i].jindu = parseInt(num)
						}
					}
				})
			},
			getTimeKillCommodity() {
				if (this.headTapIndex == 0) {
					console.log('更新已结束限时秒杀商品');
					this.Goods(1)
				} else if (this.headTapIndex == 1) {
					console.log('更新限时秒杀商品');
					this.Goods(2)
				} else {
					console.log('更新即将开始限时秒杀商品');
					this.Goods(3)
				}
			},
			// 立即抢购
			buyCommodity(e) {
				this.$interface.routeLink({
					route: 'killDetail',
					data: {
						id: e
					}
				})
			}
		},
		watch: {
			// 监听头部选项卡
			headTapIndex() {
				this.commodityList = []
				this.getTimeKillCommodity()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FAFAFA;
	}

	.time-kill-commodity__-content {
		.head-menu {
			display: flex;

			.item {
				flex: 1;
				background-color: #636363;
				line-height: 84upx;
				color: #FFFFFF;
				font-weight: 400;
				font-size: 28upx;
				text-align: center;
			}

			.active-item {
				background-color: #E6B873;
			}
		}

		.commodity-content {
			background-color: #FFFFFF;

			.citem {
				height: 280upx;
				box-sizing: border-box;
				padding: 40upx 30upx;
				border-bottom: 2upx solid #E6E6E6;
			}
		}
		.no-more{
			width: 100%;
			height: 90upx;
			line-height: 90upx;
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			opacity: 1;
			text-align: center;
		}
	}
</style>
